@import "common.css";
@import "normalize.css";

/* 头部 */
.head{
    position: static;
    .head-nav{
        a{
            color: #181818;
        }
        .active {
            font-size: 16px;
            color: #00bdff;
            border-bottom: 2px solid #00bdff;
        }
    }
    .sign{
        a{
            color: #666;
            border-color: #d1d1d1;
        }
    }

}

/* canvas */

.canvas {
    position: relative;
    height: 350px;
    background-color: #f1f1f1;
    canvas {
        position: absolute !important;
        z-index: 0 !important;
        width: 100%;
        height: 350px;
    }
}

/* api-main主要内容 */
.api-main{
    position: absolute;
    top: 106px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 270px;
    .img-desc{
        width: 260px;
        height: 270px;
        background-color: #fff;
        margin-right: 56px;
        padding-top: 54px;
        .api-desc{
            padding-left: 25px;
            margin-top: 47px;
            li{
                width: 70px;
                height: 50px;
                color: #c6c6c6;
                .smallicon{
                    line-height: 26px;

                }
            }
        }
    }
    .api-info{
        width: 600px;
        height: 270px;
        .api-title{
            line-height: 40px;
            span{
                line-height: 20px;
                font-size: 12px;
                padding: 0 5px;
                color: #00bdff;
                border: 1px solid #00bdff;
                margin-left: 9px;
                margin-top: 9px;
            }
        }
        // 第二行
        .user-info{
            line-height: 22px;
            color: #f8aa39;
            .info-item{
                margin-right: 35px;
                &:nth-of-type(3){
                    margin-right: 0;
                }
            }
            span{
                font-size: 14px;
                font-weight: bold;
                img{
                    margin-right: 7px;
                }

            }
        }
        // 第三行
        .info-text{
            font-size: 14px;
            line-height: 26px;
            color: #666;
            margin-top: 6px;
            margin-bottom: 11px;
        }
        // 第四行
        .price-ul{
            list-style: none;
            li{
                font-size: 12px;
                height: 28px;
                padding: 0px 12px;
                line-height: 26px;
                border: 1px solid #999;
                margin-right: 14px;
                cursor: pointer;
                &:nth-of-type(1){
                    color: #00bdff;
                    border-color: #00bdff;
                    &:hover .qrcode-box{
                        height: 150px;
                    }
                }
                img{
                    position: relative;
                    margin-right: 4px;
                }
                .qrcode-box{
                    position: absolute;
                    left: -12px;
                    // height: 150px; //不知道为啥这里设高度没用
                    // border: 1px solid red;
                    /* display: none; */
                    height: 0px;
                    overflow: hidden;
                    transition: all 1s;
                    .qrcodeImg{
                        width: 120px;
                    }
                    .qrcode-tip{
                        color: #181818;
                    }
                }

            }
            .qrcode{
                position: relative;
                float: left;
            }
            .selected{
                border-color: #00bdff;
                color: #00bdff;
                background: url(../imgs/select.png) no-repeat right bottom;
            }
        }
        // 第五行
        .price-info{
            font-style: 12px;
            line-height: 38px;
            margin-top: 6px;
            .price{
                color: #fb5b5b;
            }
        }
        // 第六行
        .apply{
            line-height: 40px;
            .now-btn{
                display: block;
                width: 120px;
                text-align: center;
                color: #fff;
                font-weight: bold;
                background-color: #00bdff;
                cursor: pointer;
            }
        }
    }
}

/* content内容区域 */
.content{
    .tabtop{
        border-bottom: 1px solid #f4f4f4;
        .tab-ul{
            li{
                position: relative;
                line-height: 45px;
                margin-right: 110px;
                font-size: 16px;
                cursor: pointer;
            }
            .tab-active{
                &::before{
                    content: "";
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    width: 100%;
                    height: 3px;
                    background-color: #00bdff;
                }
            }
        }
        .tab-content{
            padding-top: 47px;
            height: 1320px;
            .tabcon{
                width: 920px;
                padding-left: 10px;
                .tabcon-item{
                    display: none;
                    p{
                        line-height: 35px;
                        span{
                            color: #777;
                        }
                    }
                    .api-btn{
                        margin-top: 10px;
                        margin-bottom: 46px;
                        .test-btn{
                            display: inline-block;
                            width: 150px;
                            height: 34px;
                            font-size: 14px;
                            line-height: 34px;
                            color: #fff;
                            text-align: center;
                            background-color: #00bdff;
                        }
                    }
                    .simpleTable{
                        margin-bottom: 50px;
                        .linep{
                            position: relative;
                            font-size: 14px;
                            line-height: 16px;
                            color: #555;
                            padding-left: 14px;
                            font-weight: bold;
                            margin-bottom: 18px;
                            &::before{
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 4px;
                                height: 16px;
                                background-color: #00BDFF;
                            }
                            .json-tool{
                                background: #1271ef;
                                font-weight: normal;
                                font-size: 14px;
                                border-radius: 6px;
                                color: #fff;
                                padding: 5px 12px;
                            }
                        }
                        .api-table{
                            width: 100%;
                            // 合并表格边框线
                            border-collapse: collapse;
                            line-height: 32px;
                            border: 1px solid #e7e7e7;
                            tbody{
                                .title{
                                    th{
                                        color: #999;
                                        background-color: #fbfbfb;
                                        text-align: left;
                                        border-bottom: 1px solid #e7e7e7;
                                    }
                                }
                                tr{
                                    td{
                                        color: #666;
                                        background-color: #fff;
                                        border-bottom: 1px solid #e7e7e7;
                                    }
                                }
                            }
                        }
                        .json-code{
                            padding: 20px;
                            background-color: #fafafa;
                        }
                    }
                }
                .on{
                    display: block;
                }
                .api-doc{
                    font-size: 12px;
                    color: #555;
                }
            }
            // 右的侧边栏
            .aside{
                width: 220px;
                min-height: 600px;
                h3{
                    font-size: 16px;
                    line-height: 26px;
                    color: #999;
                    margin-bottom: 11px;
                }
                .activity-ul{
                    margin-bottom: 18px;
                    li{
                        height: 80px;
                        margin-bottom: 10px;
                    }
                }
                .recommend{
                    li{
                        padding-bottom: 15px;
                        margin-bottom: 15px;
                        // dashed虚线
                        border-bottom: 1px dashed #eee;
                        &:last-of-type{
                            border-bottom: none;
                        }
                        .imgbox{
                            width: 58px;
                            height: 60px;
                            padding-top: 18px;
                            text-align: center;
                            border: 1px solid #eee;
                        }
                        .text{
                            a{
                                color: #555;
                                line-height: 26px;
                            }
                            .desc{
                                span{
                                    font-size: 12px;
                                    color: #999;
                                }
                                width: 150px;
                                line-height: 22px;
                                // 文字不换行
                                white-space: nowrap;
                                overflow: hidden;
                                // 最后文字用……显示
                                text-overflow: ellipsis;
                            }
                        }
                    }

                }
            }
        }
    }
}


/* 体验experience */

.experience{
    margin: 50px 0 30px;
    .logo-register{
        height: 241px;
        // padding-top: 64px;
        background: url(../imgs/login-register-bg.svg)no-repeat #1271ef;
        display: flex;
        flex-direction: column;
        width: 1349px;
        justify-content: center;
        align-items: center;
            p{
                font-size: 32px;
                color: #fff;
                margin-bottom: 22px;
            }
            a{
                display: block;
                width: 128px;
                height: 40px;
                line-height: 40px;
                color: #fff;
                font-size: 12px;
                border: 1px solid #fff;
                margin: 0 auto;
                text-align: center;
            }
    }
}